<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 1. 定义模板 -->
    <div id="app">
      <div @click.self="handle">
        <h1>欢迎来尚硅谷学习</h1>
        <button v-on:click="handle">点我展示信息(v-on绑定)</button><br /><br />
        <button @click="handle">点我展示信息(@绑定)</button><br /><br />
        <!-- 触发事件的同时,可以传递数据.传递的方式就是在函数名的小括号里面直接写. 但是传了数据,则默认丢失了事件对象.这时如果需要事件对象,就直接写$event,事件处理函数中就可以直接拿到数据和事件对象了 -->
        <button @click="fn($event,9)">点我展示信息(传递参数)</button
        ><br /><br />
        <a href="http://www.atguigu.com" @click.prevent="linkHandle"
          >点我展示信息(阻止默认事件)</a
        ><br /><br />
        <button @click.stop="linkHandle">点我展示信息(阻止冒泡)</button
        ><br /><br />
        <a @click.prevent.stop="linkHandle" href="http://www.atguigu.com"
          >点我展示信息(阻止默认事件+冒泡)</a
        ><br /><br />
        <input
          type="text"
          placeholder="按下回车键展示信息"
          @keydown.enter.once="func"
        />
      </div>
      <div>{{msg}}</div>
      <button @click="test">按钮</button>
      <!-- 绑定事件忽略事件处理函数. 注意: 这里只能写vue实例身上有的东西 -->
      <button @click="msg = msg+'嘿嘿嘿,下课了'">按钮</button>
    </div>
    <!-- 2. 引入vue.js -->
    <script src="./vue.js"></script>

    <!-- 3. 创建vue实例 -->
    <script>
      var vm = new Vue({
        el: '#app',
        data: {
          msg: 'hello vue',
        },
        // vue中的事件处理函数都应该定义在methods里面. 定义在methods里面的函数,也可以在模板的插值表达式中直接使用
        methods: {
          handle(e) {
            // e 就是事件对象
            // console.log('123', e)
            // vue中事件处理函数的this就是vue实例
            // console.log(this, vm, this === vm)
            console.log('父级元素的div被触发了')
          },

          fn(e, num) {
            console.log('fn', num, e)
          },

          linkHandle(e) {
            // e.preventDefault()
            // e.stopPropagation()
            console.log('a标签被点击了')
          },
          func(e) {
            // if (e.key !== 'Enter') return
            console.log('按下回车键了')
          },
          test() {
            this.msg = this.msg + '嘿嘿嘿,下课了'
          },
        },
      })
    </script>
  </body>
</html>
